<script>
import {
  delMaterial_return,
  getMaterial_return, storeMaterial_return
} from '@/api/yyj/wm/inbound/material_return'

export default {
  dicts: ['gbs_good_type'],
  data() {
    return {
      // 表单参数
      form: {},
      // 物料清单集合
      returnMaterialList: [],
      // 遮罩层
      loading: false,
    }
  },
  created() {
    this.reset();
    this.getData();
  },
  computed: {
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    },
  },
  methods: {
    // 查询退料单
    getData() {
      this.loading = true;
      const pmrCode = this.$route.query.pmrCode;
      this.returnMaterialList = [];
      getMaterial_return(pmrCode).then(response => {
        this.form = response.data;
        if (this.form.returnMaterialList !== null) {
          this.returnMaterialList = this.form.returnMaterialList;
        }
        this.loading = false;
      })
    },
    // 表单重置
    reset() {
      this.form = {
        pmrCode: null,
        pmrName: null,
        pmrReturnDate: null,
        pmrReturnPeo: null,
        pmrReturnPeoName: null,
        pmrWorkOrder: null,
        pmrWorkTask: null,
        pmrWorkProcedure: null,
        pmrDesc: '',
        pmrStatus: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        materialCount: null,
        requestNum: null,
        pmrWorkOrderName: null,
        pmrWorkTaskName: null,
        prouteCode: null,
        prouteName: null,
        procedureName: null,
        returnMaterialList: [],
        pmrProductCode: null,
      };
      this.resetForm("form");
    },
    handleSelectionChange(selection) {
      this.multiple = !selection.length;
      this.selectedRows = selection.map(row => {
        return {
          row: row,
          index: this.returnMaterialList.indexOf(row)
        }
      })
    },
    // 页面关闭事件
    handlePageClose() {
      this.reset();
      this.$tab.closeOpenPage();
      this.$tab.refreshPage({
        path: '/wm/inbound/material_return'
      })
    },
    /** 修改按钮操作 */
    handleEdit() {
      const pmrCode = this.form.pmrCode;
      this.$router.push({
        path: '/warehouse/inbound/material_return/edit',
        query: {
          pmrCode: pmrCode
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      const pmrCode = this.form.pmrCode;
      this.$modal.confirm('是否确认删除生产退料编号为"' + pmrCode + '"的数据项？').then(() => {
        return delMaterial_return(pmrCode);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.reset();
        this.$tab.closeOpenPage();
        this.$tab.refreshPage({
          path: '/wm/inbound/material_return'
        });
      }).catch(() => {});
    },
    // 确认入库按钮操作
    handleStore() {
      const pmrCode = this.form.pmrCode;
      const pmrStatus = '1';
      const materialList = this.returnMaterialList;

      this.$modal.confirm('是否确认入库生产退料编号为"' + pmrCode + '"的数据项？').then(() => {
        storeMaterial_return({
          pmrCode: pmrCode,
          pmrStatus: pmrStatus,
          materialList: materialList
        }).then(() => {
          this.$modal.msgSuccess("入库成功");
          this.reset();
          this.getData();
        }).catch(() => {})
      })
    },
    // 导出按钮操作
    handleExport() {
      this.download('wm/inbound/material_return/export', {
        ...this.queryParams
      }, `material_return_${new Date().getTime()}.xlsx`)
    },
  }
}
</script>

<template>
  <div class="app-container">
    <div class="page-body">
      <div class="my-detail-header">
        <div>
          <span style="
          font-size: medium;
          margin-right: 5px;
          vertical-align: bottom;">
            {{ form.pmrName }}
          </span>
          <span style="color: #606266; font-size: x-small; vertical-align: bottom">{{ form.pmrCode }}</span>
        </div>
        <el-descriptions :column="4" style="margin-top: 15px">
          <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
          <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">{{ form.updateTime }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <el-row v-if="this.form.pmrStatus === '0'" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleEdit"
            v-hasPermi="['wm:inbound:material_return:edit']"
          >编辑</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            v-hasPermi="['wm:inbound:material_return:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-upload"
            size="mini"
            @click="handleStore"
            v-hasPermi="['wm:inbound:material_return:store']"
          >确认入库</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['wm:inbound:material_return:export']"
          >导出</el-button>
        </el-col>
      </el-row>
      <el-row v-else :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['wm:inbound:material_return:export']"
          >导出</el-button>
        </el-col>
      </el-row>

      <el-divider />

      <el-tabs type="border-card">
        <el-tab-pane  label="基础信息">
          <el-form ref="form" :model="form" size="small" :inline="true">
            <el-row class="mb8">
              <el-col :span="10" :offset="2">
                <el-form-item label="退料单名称" prop="pmrName" label-width="92px">
                  <span>{{ this.form.pmrName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="退料日期" prop="pmrReturnDate" label-width="92px">
                  <span>{{ this.form.pmrReturnDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mb8">
              <el-col :span="10" :offset="2">
                <el-form-item label="退料人" prop="pmrReturnPeoName" label-width="92px">
                  <span>{{ this.form.pmrReturnPeoName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="工单名称" prop="pmrWorkOrderName" label-width="92px">
                  <span>{{ this.form.pmrWorkOrderName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mb8">
              <el-col :span="10" :offset="2">
                <el-form-item label="工单编号" prop="pmrWorkOrder" label-width="92px">
                  <span>{{ this.form.pmrWorkOrder }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="任务名称" prop="pmrWorkTaskName" label-width="92px">
                  <span>{{ this.form.pmrWorkTaskName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mb8">
              <el-col :span="10" :offset="2">
                <el-form-item label="任务编号" prop="pmrWorkTask" label-width="92px">
                  <span>{{ this.form.pmrWorkTask }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="工艺路线" prop="prouteName" label-width="92px">
                  <span>{{ this.form.prouteName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mb8">
              <el-col :span="10" :offset="2">
                <el-form-item label="工序名称" prop="procedureName" label-width="92px">
                  <span>{{ this.form.procedureName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mb8">
              <el-col :span="24" :offset="2">
                <el-form-item label="备注" prop="pmrDesc" label-width="92px">
                  <span>{{ this.form.pmrDesc }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="物料清单">
          <el-table :data="returnMaterialList" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="物料编码" prop="gbsGood.pdCode" align="center" width="150" fixed />
            <el-table-column label="物料名称" prop="gbsGood.pdName" align="center" width="120" fixed />
            <el-table-column label="规格型号" prop="gbsGood.pdSpecType" align="center" width="120" />
            <el-table-column label="单位" prop="gbsGood.pdGuName" align="center" width="120" />
            <el-table-column label="本次退料数量" prop="rmlReturnNum" align="center" width="120" />
            <el-table-column label="退料原因" prop="rmlReason" align="center" width="150" />
            <el-table-column label="生产日期" prop="rmlProductionDate" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.rmlProductionDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="到期日期" prop="rmlExpirationDate" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.rmlExpirationDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="仓库名称" prop="gbsGood.storageWName" align="center" width="120" />
            <el-table-column label="备注" prop="rmlDesc" align="center" width="120" />
          </el-table>

          <el-row class="mb8">
            <el-col :span="4" :offset="21">
              <span style="font-size: 12px">退料总数: {{ this.returnMaterialList.length }}</span>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <el-row class="mb8" style="margin-top: 20px">
        <el-col :span="24" style="text-align: center">
          <el-button @click="handlePageClose">关闭</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-body {
  width: 1000px;
  margin: 0 auto;
}

.formInput,.formSelect {
  width: 220px;
}

.formTextarea {
  width: 721px;
}

.team-menu {
  height: 100%;
}
</style>
